<template>
    <div :class="{'hid-slider': !isOpen}" class="app-container table-wrapper">
        <split-pane @resize="resize" :min-percent="2" :default-percent="defaultPercent" :max-percent="30" split="vertical" ref="split">
            <template slot="paneL">
                <slider :is-open="isOpen" class="slider-wrapper" @toggleSlider="toggleSlider">
                    <el-tabs v-model="leftTabName" @tab-click="handleLeftTabClick" class="left-tab">
                        <el-tab-pane label="入职管理树" name="first">
                            <el-tree
                                :props="treeProps"
                                :load="loadNode"
                                node-key="ORGVORGANIZATION_ID"
                                lazy
                                @node-click="handleNodeClick"
                                @check="handleCheck"
                                :filter-node-method="filterNode"
                                show-checkbox
                                check-strictly/>
                                <!-- check-strictly加上不关联，不加关联 -->
                        </el-tab-pane>
                    </el-tabs>
                </slider>
            </template>
            <template slot="paneR">
                <el-row style="height:50%">
                    <ztable :height-percentage="heightPercentage" :master-table="masterTable"/>
                </el-row>
                <el-row style="height:50%">
                    <el-tabs v-model="curTab" type="card">
                        <el-tab-pane v-for="(item, index) in slaveTab" :label="item.formDefName" :name="item.formDefCode" :key="index">
                            <keep-alive>
                                <component :is="item.formDefCode" v-bind="post" />
                            </keep-alive>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            </template>
        </split-pane>
    </div>
</template>

<script>
import slider from '@/components/table/slider'
import { queryTreeSolution, getDictDatasAll } from '@/api/api'
import split from '@/mixins/split'
const ztable = resolve => require(['./ztable.vue'], resolve)
export default {
    name: 'treetable',
    components: { slider, ztable },
    mixins: [split],
    data() {
        return {
            formId: '685',
            // 没有侧边为false
            isOpen: true,
            // tab默认显示哪个
            leftTabName: 'first',
            // 树的对应的显示字段
            treeProps: {
                label: 'ORGVCOMPANY_cname',
                isLeaf: 'isLeaf'
            },
            // 树的查询条件
            tree: {
                ORGVORGANIZATION_ID: null,
                lv: null
            },
            slaveTab: [
                {
                    'formDefCode': 'ORG_COMP_CARD',
                    'formDefName': '季度试听奖励ka'
                },
                {
                    'formDefCode': 'ORG_COMPADD_LIST',
                    'formDefName': '季度试听奖励表'
                }
            ],
            curTab: 'ORG_COMP_CARD',
            heightPercentage: 0.5,
            post: {
                heightPercentage: 0.5,
                hasTab: true,
                masterTable: false
            },
            masterTable: true
        }
    },
    async created() {
        // this.$eventBus.$on('common-filter', (...args) => {
        //     // todo something
        //     console.log(args[0])
        //     this.commonFilter = args[0]
        //     this.commonFilterArr.forEach(item => {
        //         this.filterData[item] = this.commonFilter
        //     })
        // }, this)
    },
    methods: {
        toggleSlider(val) {
            this.isOpen = !val
            this.defaultPercent = val ? 2 : 20
            console.log(this.defaultPercent)
            this.$refs.split.onSetPercent(this.defaultPercent)
        },
        handleLeftTabClick(tab, event) {
            console.log(tab, event)
        },
        // 懒加载树节点数据
        loadNode(node, resolve) {
            console.log(node)
            if (node.level !== 0) {
                this.tree.ORGVORGANIZATION_ID = node.key
                this.tree.lv = node.level - 1
            }
            queryTreeSolution(16, 'ORGVORGANIZATION_ID', this.tree.ORGVORGANIZATION_ID, this.tree.lv)
                .then(res => {
                    res.forEach(item => {
                        item.isLeaf = !item.isParent
                    })
                    resolve(res)
                })
        },
        // 过滤树节点
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            console.log(data)
        },
        handleCheck(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
            console.log(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
        }
    }
}
</script>

